<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="baidu-tc-cerfication"
          content="8f75aa1d017086290b42263df41c1791"/>
    <title> ${travelsBytraid.traTitle} | Seeker 舒客</title>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta name="robots" content="all"/>
    <meta name="keywords" content="开普敦攻略,旅游攻略,开普敦旅游攻略,开普敦自助游攻略"/>
    <meta name="description"
          content="最新开普敦自助游攻略：【小编推荐】开普敦——两大洋的交汇点，喧嚣热闹的繁华都市，美味的跳羚肉、海鳌虾、鲑鱼和葡萄酒的故乡。还有素有航运上的“鬼门关”，开普敦/旅游攻略"/>
    <meta name="apple-mobile-web-app-title" content="0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="icon" href="LeisureSeeker/icons/favicon.ico" sizes="16x16"/>
    <link rel="icon" href="/favicon_32x32.ico" sizes="32x32"/>
    <link rel="icon" href="/favicon_128x128.png" sizes="128x128"/>
    <link rel="icon" href="/favicon_256x256.png" sizes="256x256"/>
    <link rel="apple-touch-icon" href="favicon_256x256.png"/>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/LeisureSeeker/css/jquery-ui-1.9.custom.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/LeisureSeeker/css/ylj.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/admin/layuiadmin/css/bootstrap.css">
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="icon" href="${path}/LeisureSeeker/icons/favicon.ico" sizes="16x16"/>
    <script type="text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/LeisureSeeker/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/LeisureSeeker/js/jquery-ui-1.9.2.min.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
    <script type="text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/LeisureSeeker/js/yododo.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/LeisureSeeker/js/prototype.js"></script>
    <script type="text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/admin/layuiadmin/layui/layui.js"></script>
    <script type="text/javascript">
        var _hmt = _hmt || [];
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-145162-2']);
        _gaq.push(['_setDomainName', 'yododo.com']);
        _gaq.push(['_addOrganic', 'google.cn', 'q']);
        _gaq.push(['_addOrganic', 'baidu', 'word']);
        _gaq.push(['_addOrganic', 'baidu', 'wd']);
        _gaq.push(['_addOrganic', 'soso', 'w']);
        _gaq.push(['_addOrganic', 'sogou', 'query']);
        _gaq.push(['_addOrganic', 'youdao', 'q']);
        _gaq.push(['_addOrganic', 'so.360.cn', 'q']);
        _gaq.push(['_addOrganic', 'so.cn', 'q']);
        _gaq.push(['_addOrganic', 'so.com', 'q']);
        _gaq.push(['_addOrganic', '360sou.com', 'q']);
        _gaq.push(['_addOrganic', 'vnet', 'kw']);
        _gaq.push(['_addOrganic', '3721', 'name']);
        _gaq.push(['_addOrganic', 'gougou', 'search']);
        _gaq.push(['_addOrganic', 'sm.cn', 'q']);
        _gaq.push(['_addIgnoredOrganic', '舒客']);
        _gaq.push(['_addIgnoredOrganic', '舒客旅行网']);
        _gaq.push(['_addIgnoredOrganic', '舒客旅游网']);
        _gaq.push(['_addIgnoredOrganic', '舒客网']);
        _gaq.push(['_addIgnoredOrganic', '多多驿站']);
        _gaq.push(['_addIgnoredOrganic', '舒客客栈']);
        _gaq.push(['_addIgnoredOrganic', 'yododo']);
        _gaq.push(['_addIgnoredOrganic', 'youduoduo']);
        _gaq.push(['_addIgnoredOrganic', 'youdodo']);
        _gaq.push(['_addIgnoredOrganic', 'www.yododo.com']);
        _gaq.push(['_addIgnoredOrganic', 'www.yododo.cn']);
        _gaq.push(['_trackPageview']);
        _gaq.push(['_setCustomVar', 1, 'VisitorType', 'Visit', 2]);
        try {
            var ga_cat = location.pathname.match(/^\/([a-z/])+/)[0];
            if (ga_cat) {
                _gaq.push(['_setCustomVar', 4, 'Category', ga_cat, 3]);
            }
        } catch (ga_e) {
        }

        function addTrackEvent(action, opt_label, opt_value) {
            try {
                if (opt_value) {
                    _gaq.push(['_trackEvent', action, opt_label, opt_value]);
                    _hmt.push(['_trackEvent', action, opt_value, opt_value]);
                } else {
                    _gaq.push(['_trackEvent', action, opt_label]);
                    _hmt.push(['_trackEvent', action, opt_label]);
                }
            } catch (e) {
            }
        }
    </script>
    <style>
        .container {
            width: 1000px;
            margin-left: -50px;
        }

        .commentbox {
            width: 900px;
            margin: 20px auto;
        }

        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }

        .comment-list {
            width: 900px;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }

        .comment-list .comment-info {
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }

        .comment-list .comment-info header {
            width: 10%;
            position: absolute;
        }

        .comment-list .comment-info header img {
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }

        .comment-list .comment-info .comment-right {
            /*padding: 5px 0px 5px 11%;*/

        }

        .comment-list .comment-info .comment-right h3 {
            margin: 5px 0px;
        }

        .comment-list .comment-info .comment-right .comment-content-header {
            height: 25px;
        }

        .comment-list .comment-info .comment-right .comment-content-header span,
        .comment-list .comment-info .comment-right .comment-content-footer span {
            padding-right: 2em;
            color: #aaa;
        }

        .comment-list .comment-info .comment-right .comment-content-header span,
        .comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,
        .send, .reply-list-btn {
            cursor: pointer;
        }

        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply {
            border-bottom: 1px dashed #ccc;
        }

        .comment-list .comment-info .comment-right .reply-list .reply div span {
            padding-left: 10px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply p span {
            padding-right: 2em;
            color: #aaa;
        }
    </style>
</head>

<body>
<p style="display: none;" id="uname">${userInfo.userName}</p>
<jsp:include page="header.jsp"/>

<style>
    .idxnote {
        height: 300px;
        width: 300px;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 11111;
    }

    .idxclose {
        font-size: 12px;
        padding: 2px 5px;
        background-color: rgba(255, 255, 255, .5);
        position: absolute;
        color: #fff;
        right: 0;
        top: 0;
        text-decoration: none
    }

    @media screen and (max-width: 980px) {
        .idxnote {
            width: 0;
            height: 0
        }
    }
</style>
<script>
    function cookiesave(n, v, mins, dn, path) {
        if (n) {
            if (!mins)
                mins = 365 * 24 * 60;
            if (!path)
                path = "/";
            var date = new Date();
            date.setTime(date.getTime() + (mins * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
            if (dn)
                dn = "domain=" + dn + "; ";
            document.cookie = n + "=" + v + expires + "; " + dn + "path="
                + path;
        }
    }

    function cookieget(n) {
        var name = n + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ')
                c = c.substring(1, c.length);
            if (c.indexOf(name) == 0)
                return c.substring(name.length, c.length);
        }
        return "";
    }

    function closeclick() {
        document.getElementById('idxnote').style.display = 'none';
        cookiesave('closeclick', 'closeclick', '', '', '');
    }

    function clickclose() {
        if (cookieget('closeclick') == 'closeclick') {
            document.getElementById('idxnote').style.display = 'none';
        } else {
            document.getElementById('idxnote').style.display = 'block';
        }
    }

    /*window.onload = clickclose;*/
</script>

<!-- <script type="text/javascript" src="js/jquery.yddVote.js"></script>
<script type="text/javascript">
	$j().ready(function() {
		$j('.animaVote').yddAnimateDing();
	});
</script> -->
<div id="main" class="pdt" style="margin-top: 30px;">
    <div class="mdtbg glbg" id="bg">
        <div class="w1200">
            <div class="mdtjj">
                <strong>${travelsBytraid.traTitle}</strong>
            </div>
        </div>
        <div class="r-tbar w1200">
            <!-- <a href="javaScript:;" class="nohand"> <span>阅</span>14327
            </a>  -->
            <a href="javaScript:;"> <span>评</span>${comment}</a>
            <!--  <a href="http://www.yododo.com/user/login.ydd"><span>赞</span>赞一下</a>
            <a class="fleft"
                href="http://www.yododo.com/favorite/addFavorite.ydd?id=0140734079F969C9402881D34072C92F&type=g&from=area"">
                <i class="iconfont ">&#xF047;</i> 收藏
            </a> -->
            <a href="javaScript:;" id="mir"> <span>藏</span></a>

        </div>
    </div>

    <div class="detail_box ">
        <div class="detail_txt ">
            <div class="w1200 ">
                <div id="article-content ">
                    ${travelsBytraid.traViopath}

                    <div class="container">
                        <div class="commentbox">
							<textarea cols="80" rows="50" placeholder="来说几句吧......"
                                      class="mytextarea" id="content"></textarea>
                            <div class="btn btn-info pull-right" id="comment">评论</div>
                        </div>
                        <div class="comment-list"></div>
                    </div>

                    <script type="text/javascript"
                            src="${pageContext.request.contextPath}/admin/layuiadmin/js/jquery.min.js"></script>
                    <script type="text/javascript"
                            src="${pageContext.request.contextPath}/admin/layuiadmin/js/jquery.comment.js"></script>
                    <script type="text/javascript"
                            src="${pageContext.request.contextPath}/admin/layuiadmin/js/bootstrap.min.js"></script>
                    <script type="text/javascript">
                        //初始化数据
                        var json1 = [];
                        /*评论*/
                        $(function () {//页面加载访问显示评论的控制器
                            $.ajax({
                                url: "${path}/comapi/com/${travelsBytraid.traId}",
                                type: "get",
                                async: false,
                                success: function (data) {
                                    //控制器传过来的数据循环放到div里
                                    //判断该用户有无用户名，有就显示用户名，没有就显示手机号
                                    for (var i = 0; i < data.length; i++) {
                                        var username;
                                        if (data[i].user.userName != null) {
                                            username = data[i].user.userName;
                                        } else {
                                            username = data[i].user.tel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                                        }

                                        var a = {
                                            "id": data[i].comId,
                                            "replyName": username,
                                            "content": data[i].comContent,
                                            "time": data[i].conDate,
                                            "replyBody": []
                                        }
                                        json1.push(a);
                                    }
                                }
                            });
                            $(".comment-list").addCommentList({
                                data: json1,
                                add: ""
                            });

                        });

                        layui.use('layer', function () {
                            //用户点击评论时，进行判断，用户登录了才能评论，并且评论不能为空
                            $("#comment").click(function () {
                                //没有登录不能评论
                                if (${!empty userInfo}) {
                                    if ($("#content").val().trim() != null && $("#content").val().trim() != "") {

                                        if ($("#content").val().indexOf("<script>") == -1) {
                                            var comment = {
                                                comContent: $("#content").val(),
                                                userId: "${userInfo.userId}",
                                                traId: "${travelsBytraid.traId}"
                                            }
                                            $.ajax({
                                                url: "${path}/comapi/comment",
                                                type: "post",
                                                data: comment,
                                                success: function (data) {
                                                    if (data.msg == "添加成功") {
                                                        layer.msg(data.msg, {
                                                            icon: 1,
                                                            time: 2000

                                                        }, function () {
                                                            window.location.reload();
                                                        });
                                                    }
                                                }

                                            });
                                        } else {
                                            layer.msg("请勿输入非法字符！", {
                                                icon: 2,
                                                time: 2000

                                            });
                                        }


                                    } else {
                                        layer.msg("请输入内容！", {
                                            icon: 2,
                                            time: 2000

                                        });
                                    }
                                } else {
                                    layer.msg("请先登录！", {
                                        icon: 2,
                                        time: 2000

                                    });
                                }


                            });
                        });


                    </script>


                    <script  type="text/javascript">
                        //页面加载 判断用户是否登录，如果没有登录，提示登录后才可以收藏
                        $(document).ready(function () {
                            $("#mir").click(function () {


                                if (${!empty userInfo}) {
                                    //没有登录不能收藏
                                    var params={
                                        "tId":${travelsBytraid.traId},
                                        "uId":'${userInfo.userId}'
                                        // "code":"",

                                    };
                                    $.ajax({
                                        url: "${path}/colapi/updatecollection",
                                        type: "POST",
                                        dataType: "json",
                                        /*contentType:"application/json",*/
                                        // data:{"uid":1,"code":"","tid":18},
                                        data:params,
                                        // data:JSON.parse({"uId":1,"code":"","tId":21}),
                                        success: function (data) {
                                            if (data.result == "添加收藏成功") {
                                                layer.msg(data.result, {
                                                    icon: 1,
                                                    time: 2000
                                                }, function () {
                                                    window.location.reload();
                                                });
                                            } else if(data.result="取消收藏成功"){
                                                layer.msg(data.result, {
                                                    icon: 1,
                                                    time: 2000

                                                }, function () {
                                                    window.location.reload();
                                                });
                                            }

                                        }
                                    })
                                }
                                else {
                                    layer.msg("请先登录！", {
                                        icon: 2,
                                        time: 2000

                                    });
                                }
                            })


                        })

                    </script>
                    <script type="">
                        $(function () {
                           var picpath= '${travelsBytraid.traPicpath}';
                           if(picpath.indexOf(",")!=-1){
                               picpath = picpath.split(',')[0];
                           } else {
                               picpath ='${travelsBytraid.traPicpath}';
                           }
                           $("#bg").css("background-image","url("+picpath+")");


                        });


                    </script>

                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>